<template>
  <view>
    <search></search>

    <view class="content" v-for="item in goods_list" :key="item.goods_name">
      <navigator :url="'/pages/details/details?id=' + item.goods_id">
        <image :src="item.goods_small_logo" mode="widthFix"></image>
        <view class="text">
          <view class="name u-line-2">{{ item.goods_name }}</view>
          <view class="price">￥ {{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_list: [],
      params: {
        pagenum: 1,
        pagesize: 10,
        cid: "",
      },
    };
  },
  onLoad(options) {
    this.params.cid = options.id;
    this.getGoods(this.params);
  },
  methods: {
    async getGoods(data, callback) {
      let [err, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
        data,
      });
      if (this.params.pagenum === 1) {
        this.goods_list = res.data.message.goods;
      } else {
        this.goods_list = [...this.goods_list, ...res.data.message.goods];
      }
      callback && callback();
    },
  },
  onReachBottom() {
    this.params.pagenum++;
    this.getGoods(this.params);
  },
  onPullDownRefresh() {
    this.params.pagenum = 1;
    this.goods_list = [];
    this.getGoods(this.params, uni.stopPullDownRefresh);
  },
};
</script>

<style scoped lang="scss">
.content {
  margin: 10px 0;
  navigator {
    display: flex;
    width: 100%;
    image {
      width: 30%;
    }
    .text {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      .price {
        color: $themeColor;
      }
    }
  }
}
</style>
